<template>
    <div class="w-100% h-366px header flex justify-center text-140px c-#fff absolute left-0 top-0 z-1" >
        <span class="lh-180px" style="letter-spacing: 10px;font-family: pfHeavy;">青城大屏模板</span>
        <div class="absolute top-0px left-280px c-#0ff text-80px pt-20px z-1" id="timer"></div>
    </div>
</template>

<script setup>
import {onMounted, onUnmounted} from "vue";

let timer = null;
onMounted(() => {
    // 日期展示
    timer = setInterval(() => {
        document.getElementById('timer').innerHTML = new Date().toLocaleDateString() + ' ' + new Date().toLocaleTimeString();
    }, 1000)
})
onUnmounted(() => {
    clearInterval(timer)
})
</script>

<style lang="scss" scoped>
.header{
    background: url("@/assets/images/topHeader-blank.png") top/cover no-repeat;
}
</style>
